import React from 'react'
import { Form, Input, Button, Radio, message } from 'antd'
import request from '@/utils/request'

export default (props: any) => {
    const { form, types, setTypes, id ,close} = props
    const options = [
        {
            value: 'anhui',
            label: '安徽',
            children: [
                {
                    value: 'fuyang',
                    label: '阜阳市',
                    children: [
                        {
                            value: 'funan',
                            label: '阜南县',
                        },
                    ],
                },
            ],
        }
    ];

    const requireIf = (field: string, val: any, message: string) => {
        return ({ getFieldValue }: any) => ({
            validator(rule: any, value: any) {
                if (!value && getFieldValue(field) === val) {
                    return Promise.reject(message);
                }
                return Promise.resolve();
            }
        })
    }
    const bankCard = <>
        < Form.Item label="结算银行开户名" required name="settle_bank_account_name" rules={[
            requireIf("settle_account_type", "1", "结算银行开户名不能为空")
        ]}>
            <Input />
        </Form.Item >
        <Form.Item label="结算公司银行账号" required name="settle_bank_account" rules={[
            requireIf("settle_account_type", "1", "结算公司银行账号不能为空")
        ]}>
            <Input />
        </Form.Item>
        <Form.Item label="结算开户银行名称" required name="settle_bank_name" rules={[
            requireIf("settle_account_type", "1", "结算开户银行名称不能为空")
        ]}>
            <Input />
        </Form.Item>
        <Form.Item label="结算开户银行所在地" required name="settle_bank_address" rules={[
            requireIf("settle_account_type", "1", "结算开户银行所在地不能为空")
        ]}>
            <Input />
        </Form.Item>
    </>

    const aliPay = <>
        < Form.Item label="支付宝用户名" required name="zfb_account_name" rules={[
            requireIf("settle_account_type", "2", "支付宝用户名不能为空")
        ]}>
            <Input style={{ width: "420px" }} />
        </Form.Item >
        <Form.Item label="支付宝账号" required name="zfb_account" rules={[
            requireIf("settle_account_type", "2", "支付宝账号不能为空")
        ]}>
            <Input style={{ width: "420px" }} />
        </Form.Item>
    </>
    const onFinish = (values: any) => {
        request(`/store/update-finance/${id}`, {
            method: 'put',
            data: { ...values },
        }).then((result) => {
            if (result.code === 200) {
                message.success(result.message, 1, () => {
                    close()
                })
            }
            // getList()
        })
    }
    return (
        <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ settle_account_type: "1" }}
            form={form}
            onFinish={onFinish}
        >
            <Form.Item label="结算账户类型" required name="settle_account_type">
                <Radio.Group onChange={(e) => setTypes({ ...types, settle_account_type: e.target.value })}>
                    <Radio value={1}>银行卡</Radio>
                    <Radio value={2}>支付宝</Radio>
                </Radio.Group>
            </Form.Item>

            {types.settle_account_type === 1 && bankCard}
            {types.settle_account_type === 2 && aliPay}

            <Form.Item
                wrapperCol={{ offset: 4 }}
            >
                <Button type="primary" htmlType="submit">保存</Button>
                <Button style={{ marginLeft: "6px" }} onClick={close}>取消</Button>
            </Form.Item>
        </Form>
    )
}